<!--
 * @Author: your name
 * @Date: 2020-06-07 19:40:15
 * @LastEditTime: 2020-06-09 09:15:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \os\fetch.html
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="file" name="file" id="file" />
    <input type="button" name="" id="btn" value="submit" />

    <div style="width: 100%; min-height: 100vh;" id="container"></div>
    <script type="text/javascript">
      const $ = (id) => document.getElementById(id);

      $("btn").onclick = () => {
        let file = $("file").files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = function (e) {
          var base64image = e.target.result;
          fetch("http://127.0.0.1:3300/db/insert_image", {
            mode: "cors",
            method: "post",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ image: base64image }),
          })
            .then((res) => res.json())
            .then((res) => {
              console.log("ok!", res.data);
            })
            .catch((e) => {
              console.log(e + "error" + res.data);
            });
        };
      };

      fetch("http://127.0.0.1:3300/db/get_img_list")
        .then((res) => res.json())
        .then((res) => {
					let img = res.data;

          for (let i = 0; i < img.length; i++) {
						let image = document.createElement("img");
						image.style.height="300px";
						image.src = img[i].image;

            $("container").appendChild(image);
          }
        });

    </script>
  </body>
</html>
